<template>
	<div class="setting-cell">
		<div class="my-pic" v-if="mode === 'pic'">
			<image class="pic" :src="value" alt="" mode="aspectFill" :lazy-load="true" />
			<div class="edit">
				<image src="/static/icons/camera.png" mode=""></image>
			</div>
		</div>
		<div class="wrap" v-else>
			<div class="s-left">{{ title }}</div>
			<div class="s-right">
				<div class="txt" :class="{
					active: active
				}" v-if="!mode || mode === 'text'">{{ value }}</div>
				<image v-if="arrow" class="arrow" src="/static/icons/arrow-right.png" mode=""></image>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props: {
			mode: {
				type: String,
				default: () => {
					return 'text';
				},
				validator: value => {
					return ['text', 'pic'].indexOf(value) !== -1;
				}
			},
			value: {
				type: String,
				default: () => {
					return '';
				}
			},
			title: {
				type: String
			},
			active: {
				type: Boolean,
				default: () => {
					return false
				}
			},
			arrow: {
				type: Boolean,
				default: () => {
					return true
				}
			},
		},
		methods: {
			handlerUploadPic() {
				let that = this;
				that.$httpRequest.handlerUploadPic(res => {
					if (res) {
						this.$emit('changeAvatar', res.url);
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.setting-cell {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;



		.wrap {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			min-height: 60upx;
			padding: 15rpx 0;
			border-bottom: 1rpx solid #D8D8D8;
		}

		.s-left {
			font-size: 28upx;
			color: #000000;
			line-height: 1;
		}

		.s-right {
			font-size: 0;
			display: flex;
			align-items: center;



			.txt {
				font-size: 28upx;
				line-height: 1;
				color: #999999;
				max-width: 550rpx;
			}

			.active {
				color: #666666 !important;
			}
		}
	}

	.arrow {
		width: 34rpx;
		height: 34rpx;
	}

	.my-pic {
		width: 160rpx;
		height: 160rpx;
		margin: 30rpx auto 20rpx;
		border-radius: 50%;
		border: 1px solid #D8D8D8;
		position: relative;

		.edit {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 0, 0, 0.75);
			position: absolute;
			right: 0rpx;
			bottom: 0rpx;
			z-index: 10;

			image {
				width: 26rpx;
				height: 26rpx;
			}
		}
	}

	.pic {
		border-radius: 50%;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
</style>